這堂課要做的是一個Canvas(每日一字：Canvas意指帆布；油畫布)，大家可以用滑鼠在頁面上作畫，而畫筆會自動改變顏色(紅橙黃綠藍靛紫輪迴)和改變粗細(細變粗再變細)。範例連結如下：

邏輯流程

1. 設定<canvas>參數，預設的畫布長、畫布寬、筆色、筆尖...。
2. 設定監聽，mousemove、mousedown、mouseup、mouseout，。
3. 寫mousedown要執行的函式，讓函式能夠以預設顏色、粗細作畫。
4. 加入改變顏色及粗細變數。

課程重點

1. <canvas>：提供在頁面上畫圖的容器。
2. getContext()：事實上canvas只是提供作畫環境，而作畫這件事主要是Context來執行。因此我們要先有一個Context，const ctx = canvas.getContext("2d");。可以看到裡面有個2D參數，所以想必Context也能夠畫3D，但這次就先以2D來介紹。
3. Context參數：這次實作會用到幾個基本的Context設定

   ctx.strokeStyle = '#BADA55';
   ctx.lineJoin = 'round';
   ctx.lineCap = 'round';
   

   分別是畫筆顏色、線條間連結樣式(尖角或圓角)、畫尖樣式(方正頭或圓頭)。
4. Context作畫：實作作畫的部分是寫在mousedown要執行的函式中，

   ctx.beginPath();
   ctx.moveTo(lastX, lastY);
   ctx.lineTo(e.offsetX, e.offsetY);
   ctx.stroke();
   

   上面這幾行code基本上是共存的，缺一不可。beginPath()是個啟動作畫的函式，moveTo()和lineTo()可以想成是線段的起點和終點，最後stroke()是把線段畫上去。

延伸閱讀

• Destructuring Assignment：在實作中老師用這個方法來賦予變數值，如
  [lastX, lastY] = [e.offsetX, e.offsetY];，可同時賦予多個變數值。
• HSL：實作中所用的色彩標示是採用HSL。HSL就是Hue(色相)、Saturation(飽和度)、Lightness(明亮度)。在這裡用HSL有個好處，就是做顏色變化只需要調整H值，而且H值的範圍是0~360，也是從紅→橙→黃→綠→藍→靛→紫→紅，開始結束都是紅色，因此可以很容易做顏色變化的循環。

參考來源

• Destructuring Assignment(解構賦值)
• RGB、HSL、Hex 網頁色彩碼，看完這篇全懂了